<template>
	<view class="main">
		<!-- <router-view @reloadAddress="reloadAddress" /> -->
		<view>
			<nav-bar isItem>
				<image slot="left" @click="type" src="../../../static/img/common/left-arrow.svg" alt=""
					style="width: 64rpx;height: 64rpx;" />
				<view slot="center" class="center">收货地址</view>
			</nav-bar>

			<scroll-view :show-scrollbar="false" v-if="addresses" class="scroll" :scroll-y="true">
				<view v-for="address of addresses" :key="address.i" class="row">
					<view @click="selected(address)" class="view">
						<view class="view">
							<view class="view">{{ address.receiver }}</view>
							<view class="view">{{ address.phone }}</view>
						</view>
						<view class="view">
							{{ address.province + address.city+ (address.area ? address.area:'')  +address.address }}
						</view>
					</view>
					<view class="edit view" @click="editAddress(address.i)">编辑</view>
				</view>
			</scroll-view>

			<view class="add" @click="addAddress">
				<view class="view">新增收货地址</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from "components/common/NavBar/NavBar";


	import {
		getAddress
	} from "network/user";
	import {
		mapMutations,
		mapState
	} from "vuex";

	export default {
		components: {
			NavBar,
		},
		props: {
			props: {
				type: Number,
				default () {
					return 0;
				},
			},
		},
		data() {
			return {
				addresses: null,
				select: null,
				pay: -1,
			};
		},
		methods: {
			...mapMutations(["setAddress", "setAddressReload"]),
			reloadAddress() {
				getAddress().then((res) => {
					console.log('res', res);
					this.$set(this, "addresses", res[1].data.data);

					this.setAddressReload(false);
				});
			},
			editAddress(i) {
				// this.$router.push(`/my/address/edit?i=${i}`);
				console.log(i, 'i');
				uni.navigateTo({
					url: `/pages/my/address/EditAddress?edit=${i}`
				})

			},
			addAddress() {
				// this.$router.push("/my/address/add");
				uni.navigateTo({
					url: "/pages/my/address/AddAddress"
				})
			},
			selected(address) {
				if (this.pay == 1) {
					this.setAddress(address);
					this.back();
				}
			},
			type() {
				if (this.pay == 2) {
					if (!this.addresses) {
						this.info('请先添加收货地址');
					} else {
						this.setAddress(this.addresses[0]);
						this.back();
					}
				} else {
					this.back();
				}
			},
		},
		onLoad({
			pay
		}) {
			this.pay = pay;
			this.select = pay ? true : false;
			getAddress().then((res) => {
				this.$set(this, "addresses", res[1].data.data);
			});
		},
		computed: {
			...mapState(["ifReloadAddress"])
		},
		onShow() {
			if (this.ifReloadAddress) {
				this.reloadAddress();
			}
		},
	};
</script>
<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100vh;
		background-color: rgb(247, 247, 247);
		position: relative;
	}

	.scroll {
		height: calc(93.3vh - 140rpx);
		overflow: hidden;
		background-color: white;
		position: relative;
	}

	.add {
		position: absolute;
		width: 100vw;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;
		background-color: white;
	}

	.add > .view {
		width: 90%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: rgb(242, 65, 12);
		text-align: center;
		color: white;
		font-size: 36rpx;
		display: inline-block;
		line-height: 80rpx;
	}

	.btn_active {
		background-color: rgb(252, 26, 0);
	}

	.btn {
		background-color: rgb(255, 188, 179);
		pointer-events: none;
	}

	.row {
		display: flex;
		flex-direction: row;
		height: 120rpx;
		width: 95vw;
		padding: 10rpx 2.5vw;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		border-bottom: 2rpx solid rgb(242, 242, 242);
	}

	.row > .view > .view:nth-child(1) > .view {
		font-weight: 550;
		font-size: 32rpx;
	}

	.row > .view > .view {
		display: flex;
		flex-direction: row;
		font-weight: 400;
		font-size: 26rpx;
		width: 100%;
		/* #ifdef H5,APP */
		gap: 10rpx;
		/* #endif */
		
		padding: 10rpx;
	}
	
	/* #ifdef MP-WEIXIN */
	.row > .view > .view > .view {
		margin-right: 10rpx;
	}
	/* #endif */

	.edit {
		color: rgb(240, 27, 27);
		font-size: 28rpx;
	}
</style>
